<template>
  <Header />
  <el-container class="container">
    <h2 class="title">东软智能云工厂</h2>
    <div class="slogan">
      海量流量、精准营销、深度分析，助力工厂产品销量口碑双丰收
    </div>
    <div class="background">
      <img class="bgIMG" src="../assets/img/bg.jpg" />
    </div>
    <div class="loginCard">
      <div class="loginContent">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginFormRules"
          class="login_form"
        >
          <el-row class="login-title">账号密码登录 </el-row>
          <!-- 用户名 -->
          <el-form-item prop="account">
            <el-input
              v-model="loginForm.account"
              prefix-icon="el-icon-s-custom"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="密码"
            ></el-input>
          </el-form-item>
          <!-- 验证码 -->
          <!-- <el-form-item>
            <div class="captcha">
              <div class="captcha-block">
                <el-input
                  v-model="loginForm.verifyCode"
                  class="verify"
                  placeholder="请输入验证码"
                  minlength="4"
                  maxlength="4"
                  @blur="checkVerifyCode"
                ></el-input>
                <img
                  id="img"
                  alt="验证码"
                  style="margin-left: 8px"
                  :src="src"
                  onclick="this.src='http://localhost:8080/api/user/getVerifyCode?t='+Math.random()"
                />
              </div>
            </div>
          </el-form-item> -->
          <!-- 按钮区域 -->
          <el-form-item>
            <el-button
              class="loginBtn"
              type="primary"
              :loading="loading"
              @click="login"
            >
              <span style="color: black; font-size: 15px">登录</span>
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              class="registerBtn"
              type="primary"
              :loading="loading"
              @click="register"
            >
              <span style="color: #ff9900; text-decoration: underline"
                >还没有账号? 立即注册</span
              >
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-container>
</template>

<script>
import { ElMessage } from 'element-plus'
import Header from '../components/pageHeader.vue'
import { reactive } from 'vue'
import axios from 'axios'

export default {
  setup() {
    // 验证码
    let user = reactive({
      verifyCode: '',
    })
    let checkVerifyCode = () => {
      axios.checkVerifyCode({
        code: user.verifyCode
      }).then((res) => {
        console.info(res)
        if (res.code !== 200) {
          ElMessage.error(res.msg)
        } else {
          ElMessage.success(res.msg)
        }
      })
    }
    return {
      user,
      checkVerifyCode,
      ruleLoginForm: {
        verifyCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '长度4个字符', trigger: 'blur' },
        ],
      },
    }
  },
  components: {
    Header,
  },
  name: 'logIn',
  data() {
    return {
      // 登录按钮loading状态
      src: 'http://localhost:8080/api/user/getVerifyCode?t=' + Math.random(),
      loading: false,
      // 这是登录表单的数据绑定对象
      loginForm: {
        account: '',
        password: '',
      },
      type: '',
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        account: [
          {
            required: true,
            message: '请输入登录名',
            trigger: 'blur',
          },
        ],
        // 验证密码是否合法
        password: [
          {
            required: true,
            message: '请输入登录密码',
            trigger: 'blur',
          },
        ],
        //验证码检验
        verifyCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '长度4个字符', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    register() {
      this.$router.push({ path: '/register' })
    },
    login() {
      // console.log(store.state)
      axios
        .post('/user/login', {
          account: this.loginForm.account,
          password: this.loginForm.password,
        })
        .then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            console.log('success')
            //判断登录类型
            if (res.data.data.character == '超级管理员') {
              this.type = 'admin'
              this.$store.commit('login', {
                user: this.loginForm,
                userType: this.type,
              })
              console.log(this.$store.state.user)
              this.$router.push({ path: '/admin' })
            } else if (res.data.data.character == '经销商') {
              this.type = 'customer'
              this.$store.commit('login', {
                user: this.loginForm,
                userType: this.type,
              })
              console.log(this.$store.state.user)
              this.$router.push({ path: '/customer' })
            } else if (res.data.data.character == '云工厂管理员') {
              this.type = 'factory'
              this.$store.commit('login', {
                user: this.loginForm,
                userType: this.type,
              })
              console.log(this.$store.state.user)
              this.$router.push({ path: '/factory' })
            }
          } else {
            this.$alert(res.data.message, 'Alert', {
              confirmBtnText: 'OK',
            })
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
    },
  },
}
</script>

<style lang="less" scoped>
.background {
  background-repeat: no-repeat;
  z-index: -1;
  position: absolute;
}
.bgIMG {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 0;
  filter: blur(5px);
}
.container {
  // width: 100%;
  // height: 100vh;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  min-width: 640px;
  position: relative;
  overflow: hidden;
  display: block;
}
.title {
  margin: 60px 0 0;
  font: 400 48px/48px Helvetica, sans-serif;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 20px rgb(0 0 0 / 30%);
}
.slogan {
  margin-top: 10px;
  color: #fff;
  text-align: center;
  font: 400 24px/24px PingFangSC-Regular, sans-serif;
  text-shadow: 0 2px 20px rgb(0 0 0 / 50%);
}
.loginCard {
  // width: 30%;
  // display: flex;
  // background-image: #fff;
  // border-radius: 20px;
  // z-index: 1;
  // justify-content: center;
  // align-items: center;
  width: 400px;
  // height: 446px;
  margin: 60px auto 106px;
  background-color: #fff;
  border-radius: 20px;
}
.loginContent {
  opacity: 1;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: space-between;
}
.login-title {
  font-size: 20px;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  margin: 2rem 1rem;
}
.el-input {
  font-size: 1.2em;
  width: 60%;
}
.el-form-item {
  margin:2rem;
}
.el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  top: 100%;
  // left: 0;
  background-color: black;
}
.loginBtn {
  width: 60%;
  background-color: #ffb000;
  border-radius: 10px;
  border: none !important;
  font-size: 20px;
}
.registerBtn {
  width: 60%;
  background-color: #ffffff;
  border: none !important;
}
.verify {
  width: 40%;
  display: block;
  font-size: 1.2em;
  flex: 1 1 auto;
}
.captcha {
  display: flex;
  flex-direction: row;
  justify-content: center;

  .captcha-block {
    width: 251px;
    display: flex;
    flex-direction: row;
  }
}
</style>
